<template>
  <div>
    <el-row>
      <el-col>
        <el-col :span="24">
          <div class="grid-content " style="height: 370px;width: 100%;">
            <br>
            <b style="margin-left: 2%;">基准刑，单位：月</b>
            <br>
            <br>
            <el-input v-model="inputone" placeholder="请输入内容" style="margin-left: 1%;width: 95%;"></el-input>
            <br>
            <br>
            <b style="margin-left: 2%;">向上调节比例，单位：百分比</b>
            <br>
            <br>
            <el-input v-model="inputtwo" placeholder="请输入内容" style="margin-left: 1%;width: 95%;"></el-input>
            <br>
            <br>
            <b style="margin-left: 2%;">向下调节比例，单位：百分比</b>
            <br>
            <br>
            <el-input v-model="inputthree" placeholder="请输入内容" style="margin-left: 1%;width: 95%;"></el-input>
            <br>
            <br>
            <el-button style="margin-left: 1%;" @click="compute">提交</el-button>


          </div>
        </el-col>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">

            <!--     <el-form-item label="公式提示">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
 -->
            <el-form-item label="公式详情">
              <span>{{ props.row.address }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="公式提示" prop="desc">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        inputone: '',
        inputtwo: '',
        inputthree: '',
        tableData: [{
          desc: '基本公式',
          address: '（1）基准刑X(1±调节比例)，例如：某一故意伤害致人重伤的案件的基准刑就是10年，假如被告人只有自首从轻处罚的情节，可以减少基准的10%，那么，自首调节基准刑的方法可表示为：10年X（1-10%）'
        }, {
          desc: '多个量刑情节的调节方法:第一种情况是只有第1个层面上的多个量刑情节',
          address: '计算口诀：部分连乘公式：基准刑X（1±调节比例）X（1±调节比例）例：假定某案件被告人是未成年人，可以减少基准刑的50%，又是从犯，可以减少基准刑的20%，则计算公式为基准刑X（1-50%）X（1-20%）'
        }, {
          desc: '第二种情况是只有第2个层面上的多个量刑情节',
          address: '计算口诀：同向相加、逆向相减<br><br>公式：基准刑X（1±同向调节比例）例：假定某案件被告人有自首情节，可以减少基准的30%，又有积极赔偿情节，可以减少基准刑的20%，则计算公式为基准刑X（1-30%-20%）'
        }]
      }
    },
    methods: {
      compute () {
        var arr = []
        var brr = []
        var a = this.inputone
        var b = this.inputtwo
        var c = this.inputthree

        arr = b.split(" ")
        brr = c.split(" ")
        var sum = 0
        sum = Number(a)
        var aaa = []
        var bbb = []
        for (var i = 0; i < arr.length; i++) {
          aaa.push(Number(arr[i]))
        }
        for (var j = 0; j < brr.length; j++) {
          bbb.push(Number(brr[j]))
        }

        var qqq = 0
        for (var k = 0; k < aaa.length; k++) {
          var n = aaa[k]
          qqq = qqq + n
          sum = sum * (1 + n / 100)
        }
        for (var f = 0; f < bbb.length; f++) {
          var s = bbb[f]
          qqq = qqq + s
          sum = sum * (1 - s / 100)
        }
        this.$alert('大约' + sum + '月', '计算结果', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            })
          }
        })
      }
    }
  }
</script>

<style>
  .bg-purple-dark {
    background: #4682B4;
    opacity: 0.85;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
